<template>
  <div style="display: flex; margin: auto; width: 1440px">
    <!-- 左 -->
    <div style="font-size: 20px">
      <div
        style="
          width: 412px;
          height: 94px;
          box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.2);
          display: flex;
          padding: 20px;
          background-color: white;
          justify-content: space-between;
        "
      >
        <div style="display: flex; align-items: center; cursor: pointer" @click="order">
          <img src="@/assets/img/orderIcon.png" style="width: 50px; height: 50px" />
          <div style="margin-left: 10px">我的订单></div>
        </div>
        <div style="width: 1px; height: 29px; border-left: 1px soild #cacaca"></div>
        <div style="display: flex; align-items: center; cursor: pointer" @click="pei">
          <img src="@/assets/img/orderIcon.png" style="width: 50px; height: 50px" />
          <div style="margin-left: 10px">快速理赔></div>
        </div>
      </div>
      <div
        style="
          margin-top: 20px;
          padding: 26px;
          box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.2);
          width: 412px;
          height: 513px;
          background-color: white;
        "
      >
        <div style="display: flex; align-items: center; justify-content: space-between">
          <div style="display: flex">
            <img src="@/assets/img/notice.png" style="width: 26px; height: 26px" />

            <div style="margin-left: 10px">公告</div>
          </div>
          <div style="color: #9a9a9a; font-size: 16px; cursor: pointer" @click="toNotice">
            更多>
          </div>
        </div>
        <div
          style="
            margin-top: 20px;
            width: 100%;
            border-bottom: 1px solid #ececec;
            margin-bottom: 20px;
          "
        ></div>
        <div
          style="margin-bottom: 27px; cursor: pointer"
          v-for="item in notice"
          :key="item.id"
          @click="noticeDetail(item)"
        >
          <div style="font-size: 18px">{{ item.title }}</div>
          <div style="margin-top: 7px; font-size: 15px; color: #999999">
            {{ item.create_time }}
          </div>
        </div>
        <div v-if="notice.length <= 0" style="height: 370px">
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
            "
          >
            <img
              src="@/assets/img/nodata.png"
              style="object-fit: contain; height: 180px"
              alt=""
            />
            <div style="color: #999999; font-size: 18px">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div
      style="
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        font-size: 20px;
        margin-left: 20px;
      "
    >
      <!-- <div
        style="
          margin-left: 20px;
          margin-bottom: 20px;
          box-shadow: 0px 0px 14px 0px rgba(96, 96, 96, 0.2);
          height: 304px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          background-color: white;
        "
        v-for="(item, index) in classifyList"
        :key="index"
        :class="index <= 1 ? 'one' : 'two'"
        @click="clickItem1(item)"
      >
        <div :class="index <= 1 ? 'one' : 'two'" style="height: 180px">
          <el-image
            :src="item.image"
            style="height: 180px"
            :class="index <= 1 ? 'one' : 'two'"
            fit="cover"
            :lazy="true"
          ></el-image>
          
        </div>
        <div style="font-weight: bold; margin-top: 16px">{{ item.name }}</div>
        <div
          style="
            width: 288px;
            font-size: 16px;
            color: #979797;
            margin-top: 10px;
            text-align: center;
          "
        >
          {{ item.memo }}
        </div>
      </div> -->
      <item2 :list="list" :classifyList="classifyList" @getClassifyId="getClassifyId"></item2>
    </div>
  </div>
</template>
<script>
import item2 from "./item2.vue";
export default {
  props: {
    classifyList: {},
    notice: {},
    item1Show: {},
    list: {},
  },
  components: { item2 },
  data() {
    return {};
  },
  methods: {
    toNotice() {
      this.$router.push({
        path: "/index/index/notice",
      });
    },
    clickItem1(item) {
      this.$emit("clickItem1", item);
    },
    order() {
      this.$router.push({
        path: "/index/order/list",
      });
    },
    pei() {
      this.$router.push({
        path: "/index/pei/index",
      });
    },
    noticeDetail(item) {
      this.$router.push({
        path: "/index/index/notice-detail/" + item.id,
      });
    },
    getClassifyId(classify_id){
      this.$emit('getClassifyId',classify_id);
    }
  },
};
</script>
<style scoped>
.one {
  width: 492px;
}

.two {
  width: 320px;
}
</style>
